<template>
  <div
    class="index-page app-contanier"
    :class="$isMobile ? '' : 'pc-container'"
  >
    <!--直播列表-->
    <template v-if="$isMobile">
      <IndexTab
        v-if="isLive"
        ref="liveRef"
        :tab-list="INDEX_TABS[activeName]"
        :search-place="'请输入直播号或直播标题'"
        :is-live="isLive"
      />
      <!--点播列表-->
      <IndexTab
        ref="videoRef"
        v-else
        :tab-list="INDEX_TABS[activeName]"
        :is-live="isLive"
      />
    </template>
    <template v-else>
      <!--点播列表-->
      <IndexTabPc ref="listRef" :tab-list="INDEX_ALL_TYPES" />
    </template>

    <div class="home-btns" v-if="$isMobile">
      <div class="btns">
        <div
          :class="['btn live', activeName === 'live' ? 'active' : '']"
          @click="changeModule('live')"
        >
          <i class="sdlive icon-live"></i>
          <span>直播</span>
        </div>
        <div class="btn-item add-btn">
          <div class="round-btn" @click="toAddLive">
            <van-icon name="plus" />
          </div>
          <div class="spce-content"></div>
        </div>
        <div
          :class="['btn video', activeName === 'video' ? 'active' : '']"
          @click="changeModule('video')"
        >
          <i class="sdlive icon-zhibohuikan"></i><span>点播</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<script setup>
import { ref, computed, inject, onActivated, nextTick } from 'vue'
import { useRouter } from 'vue-router'

import { INDEX_TABS, INDEX_ALL_TYPES } from '@/source/index'

import IndexTab from './components/index-tab.vue'
import IndexTabPc from './components/index-tab-pc.vue'

const $router = useRouter()
// const $route = useRoute()

const activeName = ref('live')

const liveRef = ref(null)
const videoRef = ref(null)
const listRef = ref(null)

const isMobile = inject('isMobile')

const isLive = computed(() => activeName.value === 'live')

const getData = async() => {
  await nextTick()
  if (isMobile) {
    if (isLive.value) {
      if (liveRef.value) {
        liveRef.value.refGetData()
      }
    } else {
      if (videoRef.value) {
        videoRef.value.refGetData()
      }
    }
  } else {
    if (listRef.value) {
      listRef.value.refGetData()
    }
  }
}

const changeModule = (name) => {
  activeName.value = name
  getData()
}

onActivated(() => {
  getData()
})

const toAddLive = () => {
  $router.push({
    path: '/add'
  })
}
</script>

<style lang="less" scoped>
.home-btns {
  width: 100%;
  height: 60px;
  background-color: #fff;
  position: relative;
  .btns {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
  }
  .add-btn {
    width: 120px;
    height: 100%;
    background-color: #fff;
    position: relative;
    .round-btn {
      width: 65px;
      height: 65px;
      position: absolute;
      top: 0;
      z-index: 2;
      left: 50%;
      transform: translate(-50%, -15px);
      box-shadow: none;
      border-radius: 50%;
    }
    .spce-content {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background-color: transparent;
      position: absolute;
      left: 50%;
      top: 0;
      z-index: 1;
      background-color: #fff;
      transform: translate(-50%, -20px);
    }
  }
  .btn {
    flex: 1;
    height: 100%;
    text-align: center;
    background-color: #fff;
    color: #999;
    .sdlive {
      display: block;
      height: 35px;
      font-size: 26px;
      line-height: 45px;
    }
    span {
      display: block;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
    }
    &.active {
      color: var(--vb-primary-color);
    }
    &.live {
      border-radius: 10px 0 0 10px;
    }
    &.video {
      border-radius: 0 10px 10px 0;
    }
  }
}
</style>
